<template>
  <div>
    <p>toRefs demo - age: {{ageRef}} name: {{nameRef}} - state: {{state.name}} {{state.age}}</p>
    <input v-focus placeholder="Auto focus by v-focus" />
  </div>
</template>

<script setup>
import { toRefs, reactive } from 'vue'

// 可选：保留组件名
defineOptions({
  name: 'ToRef'
})

const state = reactive({
    age: 20,
    name: 'test'
})

// toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式
// const state = {
//     age: 20,
//     name: 'test'
// }
// 使用 toRefs 将响应式对象的各属性转换为 ref
const { age: ageRef, name: nameRef } = toRefs(state)

setTimeout(() => {
    state.age = 25
}, 1500)

setTimeout(() => {
    ageRef.value = 30 // .value 修改值
}, 3000)

setTimeout(() => {
    state.name = 'updated-by-state'
}, 2000)

setTimeout(() => {
    nameRef.value = 'updated-by-ref'
}, 3500)
</script>